<script setup>
import { ref, onMounted } from 'vue'
import { GetCancelOrderAPI, GetOrderAllDataAPI } from '@/apis/order';
import router from '@/router';
import { usePayStore } from '@/stores';

const tableData = ref()
const getData = async () => {
  const result = await GetOrderAllDataAPI(2)
  console.log(result);
  tableData.value = result
}

const isShow = ref(false)
const cancelFn = (id) => {
  isShow.value = true
  FormData.value.id = id
}
const FormData = ref({
  text: '',
  id: ''
})
const rule = {
  text: [
    { required: true, message: "不能为空", trigger: 'blur' }
  ]
}
const ruleFormRef = ref()
const cancelResult = async () => {
  await ruleFormRef.value.validate()

  const submit = {
    id: FormData.value.id,
    message: FormData.value.text
  }
  try {
    console.log(submit);
    
    await GetCancelOrderAPI(submit)
    ElMessage.success('取消成功')
    getData()
  }catch (error){
    ElMessage.success('取消失败')
  }finally {
    isShow.value = false
  }
}

const payFn = async (id) => {
  console.log(111);
  
  await usePayStore().setOrderId(id)
  router.push('/payOrder')
}

const loading = ref(true)
onMounted(async() => {
  await getData()
  loading.value = false
})
</script>

<!-- 未支付订单 -->
<template>
           <el-table 
              :data="tableData" 
              height="500" 
              v-loading="loading"
              element-loading-text="加载中..."
            >
            <el-table-column prop="orderId" label="订单号" width="80" />
            <el-table-column prop="bookName" label="图书" width="70" />
            <el-table-column prop="orderMoney" label="订单金额" width="80" />
            <el-table-column prop="payTime" label="下单时间" width="110" />
            <el-table-column prop="user" label="收货人" width="70" />
            <el-table-column prop="phone" label="手机号" width="100" />
            <el-table-column prop="address" label="收货地址" width="160" />
            <el-table-column  label="操作" width="170" align="center">
              <template #default="{ row }">
                <el-button type="danger" round @click="cancelFn(row.orderId)">取消</el-button>
                <el-button type="primary" round @click="payFn(row.orderId)">支付</el-button>
              </template>
            </el-table-column>
          </el-table>


  <el-dialog v-model="isShow" :show-close="true" width="500" center>
    <template #header="{ titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">确认取消订单吗?</h4>
      </div>
    </template>
    <template #footer>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="FormData"
        :rules="rule"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
      <el-form-item label="取消原因" prop="text">
        <el-input
          v-model="FormData.text"
          maxlength="10"
          placeholder="请输入取消原因"
          show-word-limit
          type="text"
        />
      </el-form-item>
      <el-button style="width: 150px;" @click="cancelResult">确认</el-button>
      </el-form>
    </template>
  </el-dialog>
</template>